<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
const dic = [{
  value: 'zhinan',
  label: '指南',
  children: [{
    value: 'shejiyuanze',
    label: '设计原则',
    children: [{
      value: 'yizhi',
      label: '一致'
    }, {
      value: 'fankui',
      label: '反馈'
    }]
  }]
}]
export default {
  data () {
    return {
      form: {
        cascader: ["110000", "110100", "110101"]
      },
      option: {
        column: [{
          label: '级联',
          prop: 'cascader',
          type: "cascader",
          props: {
            label: 'name',
            value: 'code'
          },
          lazy: true,
          lazyLoad (node, resolve) {
            let stop_level = 2;
            let level = node.level;
            let data = node.data || {}
            let code = data.code;
            let list = [];
            let callback = () => {
              resolve((list || []).map(ele => {
                return Object.assign(ele, {
                  leaf: level >= stop_level
                })
              }));
            }
            if (level == 0) {
              axios.get(`${baseUrl}/getProvince`).then(res => {
                list = res.data;
                callback()
              })
            } else if (level == 1) {
              axios.get(`${baseUrl}/getCity/${code}`).then(res => {
                list = res.data;
                callback()
              })
            } else if (level == 2) {
              axios.get(`${baseUrl}/getArea/${code}`).then(res => {
                list = res.data;
                callback()
              })
            } else {
              callback()
            }
          }
        }]
      }
    }
  }
}
</script>